<template>
<div class="personalInfo-warp">
    <p class="label">点击图片更改头像</p>
    <div class="user-avatar-upload-warp">
        <userAvatarUpload v-if="userAvatarIsReady" :userId="userInfo.userId" :imageUrl="userInfo.userImg" @uploadSuccess="userAvatarUploadSuccess"></userAvatarUpload>
    </div>
    <p class="label">更改信息</p>
    <div class="profile-change-warp">
        <profileChange v-if="userInfoIsReady" :orgUserInfo="userInfo"></profileChange>
    </div>
</div>
</template>

<script>
import {request} from '@/network/request.js';
import userAvatarUpload from '@/components/profileComponents/userAvatarUpload';
import profileChange from '@/components/profileComponents/profileChange';
export default {
    name:"personalInfo",
    components:{
        userAvatarUpload,
        profileChange
    },
    data(){
        return {
            userInfo:{},
            userInfoIsReady:false,
            userAvatarIsReady:false
        }
    },
    methods:{
        userAvatarUploadSuccess(imgUrl){
            this.$message({
                message: '头像更改成功> <',
                type: 'success'
                });
            this.userInfo.userImg=imgUrl;
        }
    },
    created(){
        request({
            url:"/user/userInfo/"+this.$store.getters.getCurrentUser.userId
        }).then(res=>{
            console.log(res);
            this.userInfo=res.data.userInfo;
            this.userAvatarIsReady=true;
            this.userInfoIsReady=true;
        }).catch(err=>{
            console.log(err);
        })
    }
}
</script>

<style>
.personalInfo-warp {
    padding: 20px;
}
.label {
    border-left: 5px solid #FF69B4;
    font-size: 20px;
    color: #666;
    padding-left: 10px;
}
.user-avatar-upload-warp {
    padding: 10px;
}
.profile-change-warp {
    width: 50%;
    padding: 10px;
}
</style>